<template>
  <a-modal
    :title="fullScreenTitle"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
    :width="width"
    :class="{ myFullScreen: fullScreen }"
  >
    <a-form-model ref="dynamicValidateForm" :model="dynamicValidateForm">
      <a-row v-for="(domain, index) in dynamicValidateForm.domains" :key="domain.id || domain.vId">
        <a-col :span="8">
          <a-form-model-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="报表名称"
            :prop="'domains.' + index + '.reportCode'"
            :rules="{
              required: true,
              message: '请选择报表',
              trigger: 'change',
            }"
          >
            <a-select
              show-search
              allow-clear
              v-model="domain.reportCode"
              @change="(value) => select(value, domain)"
              style="width: 100%"
              placeholder="请选择报表"
              :getPopupContainer="
                (triggerNode) => {
                  return triggerNode.parentNode || document.body
                }
              "
            >
              <a-select-option
                v-for="item in reportsOptions"
                :key="item.value"
                :value="item.value"
                :label="item.label"
                :disabled="dynamicValidateForm.domains.some((el) => el.reportCode === item.value)"
              >
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="13">
          <a-form-model-item
            :labelCol="labelColTwo"
            :wrapperCol="wrapperColTwo"
            label="规则名称"
            :prop="'domains.' + index + '.ruleCode'"
            :rules="{
              required: true,
              message: '请选择规则',
              trigger: 'change',
            }"
          >
            <a-select
              show-search
              allow-clear
              v-model="domain.ruleCode"
              style="width: 100%"
              placeholder="请选择规则"
              mode="multiple"
              :maxTagCount="1"
              :getPopupContainer="
                (triggerNode) => {
                  return triggerNode.parentNode || document.body
                }
              "
            >
              <a-select-option
                v-for="item in rulesList[domain.reportCode]"
                :key="item.value"
                :value="item.value"
                :label="item.label"
                :title="item.title"
              >
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="3">
          <a-form-model-item>
            <a-button
              :style="{ width: '40%', marginLeft: '8%' }"
              icon="minus-circle"
              @click="removeDomain(domain, index)"
            ></a-button>
            <a-button
              v-if="index === 0"
              :style="{ width: '40%', marginLeft: '8%' }"
              icon="plus-circle"
              @click="addDomain"
            ></a-button>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </a-modal>
</template>

<script>
import FullScreenTitle from '@/components/LIbb/FullScreenTitle'
import { getFormsList, queryRuleList, queryVerificationAuthList } from '@/api/api'

export default {
  name: 'LlbbJuridicalPersonRuleForm',
  components: { FullScreenTitle },
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
    visible: {
      type: Boolean,
      default: false,
      required: false,
    },
    detail: {
      type: Object,
      default: false,
      required: false,
    },
    confirmLoading: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },

      labelColTwo: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperColTwo: {
        xs: { span: 24 },
        sm: { span: 18 },
      },
      validatorRules: {
        reportCode: [{ required: true, message: '请选择报表!' }],
        ruleCode: [{ required: true, message: '请选择规则!' }],
      },
      reportsOptions: [],
      form: {
        domains: [
          {
            reportCode: '',
            ruleCode: [],
          },
        ],
      },
      vId: 2,
      dynamicValidateForm: {
        domains: [
          {
            bankNoCd: '',
            reportCode: '',
            ruleCode: [],
            vId: 1,
          },
        ],
      },
      rulesList: {},
      ruleList: [],
      width: 1000,
      fullScreen: false,
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
  },
  created() {
    // if (this.detail.id) {
    //   this.form = this.detail
    // }
    this.initReportList2()
  },
  watch: {
    detail(newValue, oldValue) {
      if (newValue.bankNoCd) {
        this.initAuthList(newValue.bankNoCd)
      }
    },
  },
  methods: {
    fullScreenTitle() {
      return (
        <full-screen-title
          title="报表规则配置"
          fullCoderEdit={this.fullCoderEdit}
          fullScreen={this.fullScreen}
        ></full-screen-title>
      )
    },
    fullCoderEdit() {
      this.width = this.fullScreen ? 1000 : '100%'
      this.fullScreen = !this.fullScreen
    },
    initAuthList(bankNoCd) {
      queryVerificationAuthList({ bankNoCd }).then((res) => {
        if (res.code === 200) {
          let data = [
            {
              bankNoCd,
              reportCode: '',
              ruleCode: '',
              vId: this.vId,
            },
          ]
          if (res.result.length > 0) {
            data = res.result
          } else {
            this.vId = this.vId + 1
          }
          data = data.map((item) => {
            item.ruleCode =
              item && item.ruleCode
                ? item.ruleCode.indexOf(',') > -1
                  ? item.ruleCode.split(',')
                  : [item.ruleCode]
                : []
            this.select(item.reportCode)
            return item
          })
          this.dynamicValidateForm.domains = data
        } else {
          this.dynamicValidateForm.domains = [
            {
              bankNoCd,
              reportCode: '',
              ruleCode: [],
              vId: this.vId,
            },
          ]
          this.vId = this.vId + 1
          this.$message.warning('服务器出错')
        }
      })
    },
    //初始化报表表记录
    select(value) {
      if (!this.rulesList[value]) {
        queryRuleList({ reportName: value }).then((res) => {
          if (res.code === 200) {
            const ruleList = res.result.map((item, index, arr) => {
              let c = {
                label: item.ruleDesc,
                value: item.ruleCode,
                id: item.ruleCode,
                title: item.reportCnName + ' ' + item.ruleDesc,
              }
              return c
            })
            this.rulesList = { ...this.rulesList, [value]: ruleList }
          } else {
            this.$message.warning('服务器出错')
          }
        })
      }
      this.dynamicValidateForm.domains = this.dynamicValidateForm.domains.map((item) => {
        if (item.reportCode === value) {
          item.ruleCode = []
        }
        return item
      })
    },
    // 提交
    handleSubmit() {
      this.$refs.dynamicValidateForm.validate((valid) => {
        if (valid) {
          let list = this.dynamicValidateForm.domains.map((item) => {
            let data = JSON.parse(JSON.stringify(item))
            if (item.ruleCode.length > 0) {
              data.ruleCode = item.ruleCode.join(',')
            }
            return data
          })
          this.$emit('ok', list)
        } else {
          return false
        }
      })
    },
    resetForm() {
      this.$refs.dynamicValidateForm.resetFields()
    },
    removeDomain(item) {
      let index = this.dynamicValidateForm.domains.indexOf(item)
      if (index > 0) {
        this.dynamicValidateForm.domains.splice(index, 1)
      } else if (index === 0) {
        this.dynamicValidateForm.domains.splice(index, 1, {
          bankNoCd: this.detail.bankNoCd,
          reportCode: '',
          ruleCode: [],
          vId: this.vId,
        })
        this.vId = this.vId + 1
      }
    },
    addDomain() {
      this.dynamicValidateForm.domains.push({
        bankNoCd: this.detail.bankNoCd,
        reportCode: '',
        ruleCode: [],
        vId: this.vId,
      })
      this.vId = this.vId + 1
    },
    // 删除
    deleteItem(record) {
      this.list = this.list.filter((item) => (item.id ? item.id !== record.id : item.vId !== record.vId))
    },
    //初始化报表表记录
    initReportList2(reportCode) {
      getFormsList({ pageSize: 1000, reportCode }).then((res) => {
        if (res.code === 200) {
          this.reportsOptions = res.result.records.map((item, index, arr) => {
            let c = { label: item.reporttypename, value: item.reportTabName, id: item.reportTabName }
            return c
          })
        } else {
          this.$message.warning('服务器出错')
        }
      })
    },

    // 关闭
    handleCancel() {
      this.fullScreen = false
      this.width = 1000
      this.$emit('cancel')
    },
  },
}
</script>
<style lang="less" scoped>
.myFullScreen /deep/ .ant-modal {
  top: 0;
  padding-bottom: 0;
}
.myFullScreen /deep/ .ant-modal-content {
  height: 100vh;
}
</style>